<template>
  <form-dialop
    :title="$t('common.ChangeSelfInfo')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="120px">
        <el-form-item :label="$t('common.name')" prop="name">
          <el-input v-model="formData.name" @keyup.enter.native="submit" :placeholder="$t('user.nameRequired')" clearable />
        </el-form-item>
        <el-form-item :label="$t('common.description')" prop="description">
          <el-input v-model="formData.description" @keyup.enter.native="submit" :placeholder="$t('user.enterNote')" clearable />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue';
import FormDialop from '../../../components/Dialog/formDialog.vue';
export default Vue.extend({
  props: {
    submitMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      item: {},
      formData: {
        name: "",
        description: ""
      },
      formRule: {
        name: [
          { required: true, message: this.$t('user.nameRequired'), trigger: 'blur' },
          { max: 30, message: this.$t('user.nameMax'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            (this as any).$tunnyApi.apiGetSystemManagerList({}).then((res: Array<any>) => {
              if (value === (this as any).formData.name || res.findIndex((item: any) => item.name === value) === -1) {
                return callback();
              } else {
                return callback(new Error(this.$t('user.nameRepeated').toString()));
              }
            });
          }, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(item: any) {
      (this as any).visible = true;
      (this as any).item = JSON.parse(JSON.stringify(item));
      (this as any).formData.name = (this as any).item[0].username;
      (this as any).formData.description = (this as any).item[0].description;
    },
    submit() {
      (this as any).$refs.form.validate((valid: any) => {
        if (valid) {
          (this as any).loading = true;
          (this as any).submitMethod((this as any).item, (this as any).formData).then(() => {
            (this as any).handleClose();
          }).finally(() => {
            (this as any).loading = false;
          });
        }
      });
    },
    handleClose() {
      (this as any).item = {};
      (this as any).formData = {
        name: "",
        description: ""
      };
      this.loading = false;
      (this as any).visible = false;
    }
  }
})
</script>

<style lang="scss" scoped>
.el-form-item {
  display: flex;

  .el-form-item__label {
    flex-shrink: 0;
  }

  .el-form-item__content {
    flex-grow: 1;
  }
}
</style>
